<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2022-07-14 23:37:17
 * @LastEditTime: 2022-11-07 14:01:56
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 顶部水平菜单
 * @FilePath: \vue3-element-plus-web\src\views\Layouts\Admin\components\Sidebar\TopHorizontalMenu.vue
 * Copyright 版权声明
-->
<template>
  <div class="compWrap">
    <el-menu
      mode="horizontal"
      :ellipsis="false"
      :show-timeout="200"
      :default-active="$route.path"
      :collapse="isCollapse"
      background-color="#001529"
      text-color="#fff"
      active-text-color="#fff"
    >
      <!-- vue router访问 -->
      <div id="J_topSidebar" class="mysys-sidebar">
        <template v-for="route in permissionRouters">
          <template v-if="route.iframeRender === true">
            <sidebar-item-link-one
              :key="route.name"
              :item="route"
              :base-path="route.path"
              :baseUrl="authUrl"
            >
            </sidebar-item-link-one>
          </template>
          <template v-else>
            <sidebar-item
              :key="route.name"
              :item="route"
              :base-path="route.path">
            </sidebar-item>
          </template>
        </template>
      </div>
    </el-menu>

    <div id="J_topMoreMenu" class="moreMenu" :class="{'open': moreMenuOpen}" v-if="moreMenuList.length > 0">
      <span class="moreMenu_switch" @click="handleMoreMenuSwitch">
        <el-icon v-show="moreMenuOpen === false"><ArrowUpBold /></el-icon>
        <el-icon v-show="moreMenuOpen === true"><ArrowDownBold /></el-icon>
      </span>

      <el-menu
        class="moreMenu_list"
        mode="vertical"
        :ellipsis="false"
        :show-timeout="200"
        :default-active="$route.path"
        :collapse="isCollapse"
        background-color="#001529"
        text-color="#fff"
        active-text-color="#fff"
      >
        <el-scrollbar>
          <!-- vue router访问 -->
          <div class="moreMenu_sidebar">
            <template v-for="route in moreMenuList">
              <template v-if="route.iframeRender === true">
                <sidebar-item-link-one
                  :key="route.name"
                  :item="route"
                  :base-path="route.path"
                  :baseUrl="authUrl"
                >
                </sidebar-item-link-one>
              </template>
              <template v-else>
                <sidebar-item
                  :key="route.name"
                  :item="route"
                  :base-path="route.path">
                </sidebar-item>
              </template>
            </template>
          </div>
        </el-scrollbar>
      </el-menu>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'
import SidebarItemLinkOne from './SidebarItemLinkOne'
// 图标组件
import { ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue'
import $ from 'jquery'

export default {
  components: {
    SidebarItem,
    SidebarItemLinkOne,
    ArrowUpBold,
    ArrowDownBold
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'sidebarTopActive',
      'permissionRouters',
      'permissionAuthRouters'
    ]),
    routes() {
      return this.$router.options.routes
    },
    isCollapse() {
      return !this.sidebar.opened
    }
  },
  data() {
    return {
      authUrl: process.env.AUTH_URL,
      moreMenuOpen: false,
      moreMenuList: []
    }
  },
  created() {
    // console.log(this.$router.options.routes)
    // console.log(this.sidebarTopActive)
  },
  mounted() {
    const _this = this
    // 初始化更多菜单数据
    this.initMoreMenuList()
    // 监听resize， 初始化更多菜单数据
    window.addEventListener('resize', this.initMoreMenuList)
    // 点击页面其他地方，关闭折叠框
    $('body').on('click', function(e) {
      if (($(e.target).parents('.moreMenu.open')).length === 0) {
        _this.moreMenuOpen = false
      }
    })
  },
  methods: {
    // 初始化更多菜单数据
    initMoreMenuList(e) {
      // 清空更多菜单数据
      this.moreMenuList = []
      // 菜单展示区宽度
      const menuWidth = $('#J_topSidebar').width()
      // 菜单里一级宽度集合
      const menuScrollWidthList = []
      $('#J_topSidebar .menu-wrapper').each(function(index) {
        // 每个菜单项宽度
        const menuItemWidth = $(this).width()
        menuScrollWidthList.push(menuItemWidth)
      })
      // 遍历路由列表
      let menuItemIndex = 0 // 显示出来的菜单下标
      let menuScrollWidth = 0 // 菜单总宽度
      for (const item of this.permissionRouters) {
        // hidden 为 true 的路由
        if (!item.hidden && item.children) {
          menuScrollWidth += menuScrollWidthList[menuItemIndex]
          if (menuScrollWidth > menuWidth) {
            this.moreMenuList.push(item)
          }
          menuItemIndex++
        }
      }

      // 延时处理，解决dom未渲染问题
      setTimeout(() => {
        if ($('#J_topMoreMenu .moreMenu_list').length > 0) {
          // 算高度是否溢出
          const bodyHeight = $(document.body).height() - 60
          const menuListHeight = $('#J_topMoreMenu .moreMenu_list').height()
          if (menuListHeight - bodyHeight >= 0) {
            $('#J_topMoreMenu .moreMenu_list').css({ bottom: `60px` })
          }
          // 算横向坐标
          const bodyWidth = $(document.body).width()
          const menuListOffset = $('#J_topMoreMenu').offset()
          const x = menuListOffset.left
          if ((x + 200) > bodyWidth) {
            $('#J_topMoreMenu .moreMenu_list').css({ left: `auto`, right: `${bodyWidth - x - 30}px` })
          } else {
            $('#J_topMoreMenu .moreMenu_list').css({ left: `${x}px` })
          }
        }
      }, 50)
    },
    handleMoreMenuSwitch() {
      this.moreMenuOpen = !this.moreMenuOpen
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.compWrap{
  position: relative;
  padding-right: 30px;
  .el-menu{
    // overflow: hidden;
    width: 100%;
    .mysys-sidebar{
      // display: flex;
      width: 100%;
      height: 50px;
      overflow: hidden;
      .menu-wrapper{
        float: left;
      }
      :deep(.el-menu-item),
      :deep(.el-sub-menu__title){
        height: 50px;
        line-height: 50px;
      }
      :deep(.menu-wrapper>.el-sub-menu .el-sub-menu__icon-arrow){
        position: static;
        vertical-align: middle;
        margin-left: 8px;
        margin-top: -3px;
      }
    }
  }
  .moreMenu{
    position: absolute;
    top: 10px;
    right: 0;
    width: 30px;
    .moreMenu_switch{
      display: block;
      width: 30px;
      height: 30px;
      background-color: #f1f1f1;
      text-align: center;
      border-radius: 3px;
      cursor: pointer;
      color:#333;
      .el-icon{
        position: relative;
        top: -6px;
      }
    }
    > ul{
      border-right: none;
      margin: 0;
      padding: 0;
      width: 200px;
      position: fixed;
      top: 60px;
      left: 0;
      z-index: 9;
      display: none;
      overflow: hidden;
      li{
        // width: 100%;
      }
    }
  }
  .moreMenu.open{
    > ul{
      display: block;
    }
  }
}
</style>
